import React, { useState } from "react";
import MyTickList from "../../component/MyTickList";
import { useLocation, useNavigate } from "react-router-dom";
import {
  NavBar,
  Card,
  Form,
  Input,
  Button,
  Modal,
  List,
  Checkbox,
} from "antd-mobile";
import styles from "./index.module.css";
import { useSelector } from "react-redux";
import { UserOutline } from "antd-mobile-icons";
import { AddO, Arrow } from "@react-vant/icons";
import { useDispatch } from "react-redux";
import { addTick, delTick, editTick } from "../../store/TickSlice";
import { DeleteOutline } from "antd-mobile-icons";
function Index() {
  const { state } = useLocation();
  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  // console.log(state)
  const { TickListData } = useSelector((state) => state.TickSlice);
  console.log("乘车人", TickListData);

  const handleToTick = () => {
    setVisible(true);
    form.resetFields();
  };
  const handledel = (id) => {
    dispatch(delTick(id));
  };
  const onFinish = () => {
    const addObj = { ...form.getFieldsValue, id: new Date(), status: false };
    dispatch(addTick(addObj));
    setVisible(false);
    // new Date
  };
  return (
    <div style={{ background: "#ccc" }}>
      <div className={styles.orderItem_hear}>
        <NavBar onBack={() => navigate(-1)}>选择乘车人</NavBar>
        <MyTickList data={state}></MyTickList>
      </div>
      <Card style={{ background: "#fff" }} onClick={() => handleToTick()}>
        <UserOutline /> <span>添加/修改乘车人</span>{" "}
        <Arrow style={{ marginLeft: 200 }} />
      </Card>
      <div>
        <List header="基础用法">
          {TickListData.map((item, ind) => (
            <List.Item
              key={ind}
              description={item.code}
              prefix={<Checkbox />}
              extra={<DeleteOutline onClick={() => handledel(item.id)} />}
            >
              {item.name}
            </List.Item>
          ))}
        </List>
      </div>
      <Card>
        <div>
          普通预订<Arrow></Arrow>
        </div>
      </Card>
      <div className={styles.order}>
        <h2>立即预订</h2>
        <p>优惠出票，酒店立减卷+10元X1</p>
      </div>

      <Modal
        visible={visible}
        content={
          <Form
            layout="horizontal"
            form={form}
            onFinish={onFinish}
            footer={
              <Button block type="submit" color="primary" size="large">
                提交
              </Button>
            }
          >
            <Form.Header>添加/修改</Form.Header>
            <Form.Item
              name="name"
              label="姓名"
              rules={[{ required: true, message: "姓名不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入姓名" />
            </Form.Item>
            <Form.Item
              name="code"
              label="身份证"
              rules={[{ required: true, message: "身份证不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入身份证" />
            </Form.Item>
          </Form>
        }
        closeOnAction
        onClose={() => {
          setVisible(false);
        }}
      />
    </div>
  );
}

export default Index;
